﻿@page "/card/basic-card"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SampleDescription>
    <p>This sample demonstrates rendering of vertical layout card with business and profile card information.</p>
</SampleDescription>
<ActionDescription>
    <p>The card is a small content display area in which specific structure of the content can be shown. This sample demonstrates the defined structure and predefined classes for adding basic cards with header, and content elements that are used to represent individual data and its value.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-lg-6 col-md-6">
            <SfCard ID="BasicCard">
                <CardHeader Title="Debunking Five Data Science Myths" />
                <CardContent Content="Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds" />
                <CardFooter>
                    <CardFooterContent>
                        <SfButton CssClass="e-btn e-outline e-primary">Read More</SfButton>
                    </CardFooterContent>
                </CardFooter>
            </SfCard>
            <SfCard ID="NewIconCard">
                <div class="newIcon">NEW</div>
                <CardHeader Title="Debunking Five Data Science Myths" />
                <CardContent Content="Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds" />
            </SfCard>
        </div>
        <div class="col-lg-6 col-md-6">
            <SfCard ID="SideCard">
                <CardImage Image="images/cards/basic.png" />
                <CardHeader Title="Debunking Five Data Science Myths" />
                <CardContent Content="Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds" />
                <CardFooter>
                    <CardFooterContent>
                        <SfButton CssClass="e-btn e-outline e-primary">Read More</SfButton>
                    </CardFooterContent>
                </CardFooter>
            </SfCard>
        </div>
    </div>
</div>

<style>
    #BasicCard, #NewIconCard {
        height: 180px;
        margin: 16px;
    }

    #SideCard {
        height: 376px;
        margin: 16px;
    }

    .e-card > .e-card-image {
        background-repeat: no-repeat;
        min-height: 205px;
    }

    .newIcon {
        background: #2CC000;
        border-radius: 12px;
        border-radius: 12px;
        font-family: HelveticaNeue-Medium, 'Segoe UI';
        font-weight: 500;
        color: #ffffff;
        margin-left: 16px;
        font-size: 14px;
        width: 58px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.4px;
    }

    .row {
        width: 80%;
        margin: auto;
    }

    .e-btn {
        margin-left: 4px;
    }

    .e-card .e-card-content {
        padding-top: 0px;
    }
</style>
